import './App.css';
import Title from './components/Title'
import Left from './components/Left'
import Right from './components/Right'
import { Component } from 'react';

class App extends Component {
  state = {
    students: [
      {
        age: "10",
        college: "Java",
        hobbies: ["足球", "橄榄球"],
        name: "马化腾",
        number: "001",
        sex: "男"
      },
      {
        age: "12",
        college: "大前端",
        hobbies: ["足球"],
        name: "马云",
        number: "002",
        sex: "女"
      }
    ]
  }

  addStudent = (student, cb) => {
    // console.log(student)
    const students = JSON.parse(JSON.stringify(this.state.students))
    students.push(student)
    this.setState({students},cb)
    // console.log(this.state.students)
  }

  removeStudent = (number) => {
    const students = JSON.parse(JSON.stringify(this.state.students))
    const index = students.findIndex(s => s.number === number)
    students.splice(index, 1)
    console.log(students)
    this.setState({students})
  }

  render() {
    return (
      <div className="container">
        <Title/>
        <Left add={this.addStudent}/>
        <Right students={this.state.students} remove={this.removeStudent}/>
      </div>
    )
  }
}

export default App;
